<template>
  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#133C58"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1"
        ><router-link to="/" style="text-decoration: none"
          >首页</router-link
        ></el-menu-item
      >
      <el-submenu index="2">
        <template slot="title">体验</template>
        <el-menu-item index="2-1">婚宴与庆典</el-menu-item>
        <el-menu-item index="2-2">会议与宴会</el-menu-item>
        <el-menu-item index="2-3">家庭体验</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">优惠</el-menu-item>
      <el-menu-item index="4">贵宾金环会</el-menu-item>
      <div class="user">
        <span>
          <!-- <i class="el-icon-user"></i>&nbsp; -->
          <li class="wh-nav-item">
            <router-link to="/register" class="login" v-show="!islogin"
              >免费注册</router-link
            >&nbsp;
            <router-link to="/order" class="login" v-show="!islogin"
              >预订房间</router-link
            >&nbsp;
            <router-link to="/login" class="login" v-show="!islogin"
              >登录</router-link
            >&nbsp;&nbsp;
            <i class="el-icon-user-solid" v-if="islogin"></i>
            <span v-if="islogin">欢迎{{ username }}</span>
            <span class="logout" @click="exit()" v-if="islogin"
              >&nbsp;退出</span
            >
          </li>
        </span>
      </div>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      islogin:
        sessionStorage.getItem("islogin") || localStorage.getItem("islogin"),
      username:
        sessionStorage.getItem("username") || localStorage.getItem("username"),
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 退出登录
    exit() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          setTimeout(() => {
            this.$store.commit("exit");
            this.$router.push("/login");
            this.$message({
              type: "success",
              message: "已退出登录!",
            });
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
<style scoped>
/* 所有span标签呈行内块元素显示 */
.wh-nav-item {
  margin-left: 12px;
  display: inline-block;
}

.user {
  padding-bottom: 20px;
  padding-top: 20px;
  margin-right: 20px;
  color: aliceblue;
  text-align: right;
}
.login {
  color: #fff;
  text-decoration: none;
}
.login:hover {
  color: #409eed;
}
</style>